<template>
  <div>
    <a-page-header @back="onBack"
                   :style="{ background: 'var(--color-bg-2)',marginBottom:'12px' }"
                   title="海报素材设计"
                   subtitle="请选上传海报图片后再进行布局设计"
    />


    <a-row :gutter="[12, 12]">
      <a-col flex="400px">
        <a-card title="第一步 选择海报模板">


          <a-form ref="formRef" :layout="'vertical'">


            <a-form-item label="海报标题">
              <a-input v-model="postCtr.title"/>
            </a-form-item>

            <a-form-item label="海报模板">
              <smart-upload-image v-model="postCtr.httpUrl" :limit="1"/>

            </a-form-item>

            <a-form-item label="海报宽度">
              <a-input v-model="postCtr.width" disabled/>
            </a-form-item>

            <a-form-item label="海报高度">
              <a-input v-model="postCtr.height" disabled/>
            </a-form-item>




            <a-form-item>
              <a-button type="primary" @click="onSave">设计完毕</a-button>
            </a-form-item>
          </a-form>
        </a-card>
      </a-col>


      <a-col flex="auto" v-if="EmptyUtil.isNotEmptyString(postCtr.httpUrl)">

        <a-card title="元素设置">
          <template #extra>
            <a-space>
              <a-button size="small" type="primary" @click="addElement('avatar')">添加微信头像</a-button>
              <a-button size="small" type="primary" @click="addElement('nickname')">添加微信昵称</a-button>
              <a-button size="small" type="primary" @click="addElement('qrcode')">添加二维码</a-button>
            </a-space>
          </template>


          <div class="parent" :style="formatBoxStyle">
            <Vue3DraggableResizable v-for="(item,index) in  postCtr.elements" :key="index"
                                    :parent="true"
                                    :draggable="true"
                                    :resizable="true"
                                    :lockAspectRatio="item.type!=='nickname' "
                                    :initW="item.initWidth"
                                    :initH="item.initHeight"
                                    v-model:x="item.marginLeft"
                                    v-model:y="item.marginTop"
                                    v-model:w="item.width"
                                    v-model:h="item.height"
                                    v-model:active="item.active"
                                    @activated="postCtr.canvasIndex =index"
                                    :style="formatStyle(item)">
              {{ item.type === 'nickname' ? '用户昵称占位' : null }}

            </Vue3DraggableResizable>
          </div>


        </a-card>
      </a-col>
      <a-col flex="200" v-if="EmptyUtil.isNotEmptyString(postCtr.httpUrl)">
        <a-card title="海报元素信息">


          <a-descriptions size="large" :column="1" v-for="(item,index) in postCtr.elements.filter( (itx,inx)=>inx===postCtr.canvasIndex)" :key="index">
            <a-descriptions-item label="海报元素个数"> {{ postCtr.elements.length }}个</a-descriptions-item>
            <a-descriptions-item label="正在编辑"> {{ item.name }}</a-descriptions-item>
            <a-descriptions-item label="元素宽度"> {{ item.width }}px</a-descriptions-item>
            <a-descriptions-item label="元素高度"> {{ item.height }}px</a-descriptions-item>
            <a-descriptions-item label="元素顶边距"> {{ item.marginTop }}px</a-descriptions-item>
            <a-descriptions-item label="元素左边距"> {{ item.marginLeft }}px</a-descriptions-item>
            <a-descriptions-item v-if="item.type==='nickname'" label="设置昵称颜色">
              <a-input type="color" v-model="item.fontcolor" style="width: 50px"/>
            </a-descriptions-item>
            <a-descriptions-item v-if="item.type==='nickname'" label="设置昵称大小">
              <a-input-number v-model="item.fontsize">
                <template #prefix>字体大小</template>
              </a-input-number>
            </a-descriptions-item>
            <a-descriptions-item label="移除当前元素">
              <a-button status="danger" size="small" @click="removeElement(item)">移除当前元素</a-button>
            </a-descriptions-item>


          </a-descriptions>

        </a-card>
      </a-col>
    </a-row>
  </div>

</template>
<script lang="ts" setup>
import {EmptyUtil, MsgUtil} from "@/utils";
import {computed, reactive, watch} from "vue";
import Vue3DraggableResizable from 'vue3-draggable-resizable'
import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'

import {PopBasicHttp} from '../resource/http'
import {DictOptions} from "@/libs/options";

const emit = defineEmits(['cancel'])
const props = defineProps({
  record: {type: Object, required: true}
})

const onBack = () => emit('cancel', 'RELOAD')

const postCtr = reactive({

  title: '',
  width: 0,
  height: 0,
  canvasIndex: -1,
  httpUrl: '',
  elements: [],
})


const formatBoxStyle = computed(() => {
  return {width: postCtr.width + 'px', height: postCtr.height + 'px', backgroundImage: "url(" + postCtr.httpUrl + ")"}
})

const formatStyle = (record: { type: string; fontcolor: any; fontsize: string; }) => {
  let style: { backgroundImage?: string; backgroundSize?: string; borderRadius?: string; color?: any; fontSize?: string; };
  if (record.type === 'avatar') {
    style = {
      backgroundImage: "url('https://plus.hutool.cn/images/team/achao.jpg')",
      backgroundSize: "100% 100%",
      borderRadius: '50%'
    }
  } else if (record.type === 'qrcode') {
    style = {
      backgroundImage: "url('https://p2.ssl.qhimgs1.com/sdr/400__/t01b2cc294197973a9c.jpg')",
      backgroundSize: "100% 100%",

    }
  } else {
    style = {color: record.fontcolor, fontSize: record.fontsize + 'px'}
  }
  return style;
}

const addElement = (type: string) => {

  if (type === 'nickname') {
    const obj = {type: 'nickname', name: '微信昵称', initWidth: 250, initHeight: 64, marginTop: 100, marginLeft: 100, width: 250, height: 64, fontcolor: '#FFFFFF', fontsize: 32}
    postCtr.elements.push(obj)
    return;

  }
  if (type === 'qrcode') {
    const obj = {
      type: 'qrcode', name: '海报二维码', initWidth: 150, initHeight: 150, marginTop: 100, marginLeft: 100, width: 150, height: 150, active: false, fontcolor: null, fontsize: 0,
    };
    postCtr.elements.push(obj)
    return;
  }

  if (type === 'avatar') {
    const obj = {
      type: 'avatar', name: '微信头像', initWidth: 64, initHeight: 64, marginTop: 100, marginLeft: 100, width: 64, height: 64, active: false, fontColor: null, fontsize: 0
    }
    postCtr.elements.push(obj)
    return;
  }


  return;
};
const removeElement = (record: any) => {
  let index = postCtr.elements.findIndex(item => {
    return JSON.stringify(item) === JSON.stringify(record)
  })
  postCtr.elements.splice(index, 1);


}

//工具方法 获取远程图片的尺寸
const getImageInfo = (url: string) => {
  let img = new Image()
  img.src = url
  img.onload = () => {
    postCtr.width = img.width;
    postCtr.height = img.height

  }
  img.remove();


}

watch(() => postCtr.httpUrl, (x) => getImageInfo(x))

const onSave = async () => {
  const id = props.record?.id;
  const {title, width, height, httpUrl, elements } = postCtr
  const params = {title, width, height, httpUrl, elements }
  if (id !== undefined) {
    const { message} = await PopBasicHttp.updatePoster(id, params)
    MsgUtil.notify('操作成功', message, "success")
    onBack()
    return
  }

  const { message} = await PopBasicHttp.addPoster(params)
  MsgUtil.notify('操作成功', message, "success")
  onBack()
}

if (props.record?.id !== undefined) {
  postCtr.title = props.record.title
  postCtr.width = props.record.width
  postCtr.height = props.record.height
  postCtr.httpUrl = props.record.httpUrl
  postCtr.canvasIndex = 0
  postCtr.elements = props.record.elements
}
</script>


<style scoped lang="less">
.parent {
  position: relative;
  border: 1px solid #000;
  background-repeat: no-repeat;
  background-color: #fde3cf;
  user-select: none;

}

.nowBox {
  width: 200px;
  background: #f5f2f0;
}
</style>
